<template>
  <!-- 标题 -->
  <van-nav-bar title="注册" left-text="" left-arrow @click-left="$router.push('/')" />

  <!-- 表单 -->
  <van-form>
    <!-- 卡片式输入框 -->
    <van-cell-group inset class="form">
      <!-- 真实姓名 -->
      <van-field
        v-model="userName"
        name="真实姓名"
        label="真实姓名"
        placeholder="请输入真实姓名"
        :rules="[{ required: true, message: '请填写真实姓名' }]"
      />
      <!-- 用户昵称 -->
      <van-field
        v-model="nickname"
        name="用户昵称"
        label="用户昵称"
        placeholder="请输入用户昵称"
        :rules="[{ required: true, message: '请填写用户昵称' }]"
      />
      <!-- 密码 -->
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="请输入密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />

      <!-- 生日 -->
      <van-field
        v-model="birthday"
        is-link
        readonly
        name="datePicker"
        label="生日"
        placeholder="点击选择日期"
        @click="showPicker = true"
      />
      <van-popup v-model:show="showPicker" destroy-on-close position="bottom">
        <van-date-picker
          :model-value="pickerValue"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>

      <!-- 年龄 -->
      <van-field v-model="age" name="年龄" label="年龄" placeholder="请输入年龄" />

      <!-- 上传头像 -->
      <van-field name="uploader" label="上传头像">
        <template #input>
          <van-uploader v-model="avatar" />
          <!-- 头像 -->
        </template>
      </van-field>

      <!-- 楼栋信息（区域选择） -->
      <van-field
        v-model="area"
        is-link
        readonly
        name="area"
        label="地区选择"
        placeholder="点击选择省市区"
        @click="showArea = true"
      />
      <van-popup v-model:show="showArea" destroy-on-close position="bottom">
        <van-area
          :area-list="areaList"
          :model-value="pickerValue2"
          @confirm="onConfirm2"
          @cancel="showArea = false"
        />
      </van-popup>

      <!-- 收货地址 -->
      <van-field v-model="address" name="收货地址" label="收货地址" placeholder="请输入详细地址" />

      <!-- 性别 -->
      <van-field name="radio" label="性别">
        <template #input>
          <van-radio-group v-model="gender" direction="horizontal">
            <!-- 性别 -->
            <van-radio name="1">男</van-radio>
            <van-radio name="2">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>
    </van-cell-group>
  </van-form>

  <!-- 注册按钮 -->
  <div style="margin: 16px">
    <van-button round block type="primary" native-type="submit" class="zc" @click="zhuce()">
      注册
    </van-button>
  </div>
</template>

<script setup>
import { showSuccessToast, showFailToast } from "vant"
import { userRegRequest } from "@/api/user"
import { useRouter } from "vue-router"
import { areaList } from "@vant/area-data"
import { ref } from "vue"

let router = useRouter()

// 真实姓名
let userName = ref("")
// 用户昵称
let nickname = ref("")
// 密码
let password = ref("")
// 生日
const birthday = ref("") // 生日
const showPicker = ref(false)
const pickerValue = ref([])
const onConfirm = ({ selectedValues }) => {
  birthday.value = selectedValues.join("/")
  pickerValue.value = selectedValues
  showPicker.value = false
}
// 年龄
let age = ref("")
// 头像
const avatar = ref()

// 楼栋信息（区域选择）
const area = ref("")
const showArea = ref(false)
const pickerValue2 = ref([])
const onConfirm2 = ({ selectedValues, selectedOptions }) => {
  pickerValue2.value = selectedValues.length ? selectedValues[selectedValues.length - 1] : ""
  showArea.value = false
  area.value = selectedOptions.map((item) => item.text).join("/")
}

// 收货地址
let address = ref("")
// 性别
const gender = ref("1")

// 用户注册
function zhuce() {
  // 打印所有字段的值
  console.log("真实姓名:", userName.value)
  console.log("用户昵称:", nickname.value)
  console.log("密码:", password.value)
  console.log("生日:", birthday.value)
  console.log("年龄:", age.value)
  console.log("头像:", avatar.value)
  console.log("楼栋信息:", area.value)
  console.log("收货地址:", address.value)
  console.log("性别:", gender.value)

  // 发送注册请求
  userRegRequest(
    userName.value, // 真实姓名
    password.value,
    birthday.value, // 生日
    age.value, // 年龄
    avatar.value, // 头像
    area.value, // 楼栋信息
    address.value, // 收货地址
    nickname.value, // 用户昵称
    gender.value, // 性别
  ).then((r) => {
    console.log(r.data)
    if (r.data.code == 1) {
      showSuccessToast("注册成功")
      localStorage.setItem("user-token", r.data.data)
      router.push("/login")
    } else {
      showFailToast("注册失败")
    }
  })
}
</script>

<style scoped>
.form {
  margin-top: 40px;
}
.zc {
  margin-top: 40px;
}
</style>
